<template>
  <div class="standard_con" style="width: 100%">
    <div v-if="processList && processList.length > 0 " style=" text-align:left">
      <div style="height: 2rem;padding-left:0.75rem;line-height: 2rem;">加工服务</div>

      <div style="padding:0 0.5rem ;width: 49.9%; display: inline-block"
           v-for="(item, index) in processList"
           :key="index"
           v-if="item.processingattribute">
        <li :class="{active:choseIndex == index}"
            style="width: 100%;display: block ;overflow: hidden;line-height: 1rem"
            @click="chageChoseIndex(index)">
          {{item.processingattribute}}<span>（{{item.procemoney ? '¥' + item.procemoney : '免费'}}）</span>
          <i class="icon njfont nj-xuanzhong">
          </i>
        </li>
      </div>
    </div>
    <!--<p class="processcomments" style="text-align: left">-->
    <!--{{activeList ? '说明：' + activeList.processcomments : '&nbsp;'}}</p>-->
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'

  export default {
    data() {
      return {
        choseIndex: -1,
        workingInfo: ''
      }
    },
    created() {
    },
    props: {
      processList: {
        type: Array,
        default: () => [
          {
            "processingattribute": "",
            serialnumber: ""
          }
        ]
      },

      goodsId: {
        default: ''
      }
    },
    methods: {
      chageChoseIndex(index) {
        if (index == this.choseIndex) {
          this.choseIndex = -1
        } else {
          this.choseIndex = index
        }
      },


      getListFromCart() {

        var data = this.cartList
        if (!data) {
          return
        }
        var goodsId = this.goodsId
        var detail = data.find((item) => {
          return item.goodsId == goodsId
        })
        if (!detail) {
          return
        }
        this.workingInfo = detail.workingInfo
        this.setActiveIndex()
      },
      setActiveIndex() {
        var workingInfo = this.workingInfo
        var processList = this.processList
        if (!workingInfo) {
          this.choseIndex = -1
          return
        }
        else {
          workingInfo = JSON.parse(this.workingInfo)
        }
        if (workingInfo.processingattribute) {

          for (var i = 0; i < processList.length; i++) {
            if (processList[i].processingattribute == workingInfo.processingattribute) {
              this.choseIndex = i
              return
            }
          }
        } else {
          this.choseIndex = -1
        }
      }
    },
    watch: {
      choeseIndex(data) {
      },
      activeList(data) {
        var workingInfo
        if (data) {
          workingInfo = JSON.stringify(data)
        } else {
          workingInfo = ''
        }
        this.$emit('changeProcess', workingInfo)
      },
      carList() {
        this.getListFromCart()
      }
    },
    components: {},
    computed: {
      ...mapGetters('cjy', {cartList: 'cartList'}),
      activeList() {
        var choseIndex = this.choseIndex
        var processList = this.processList
        return processList[choseIndex]
      }

    },
    mounted() {
      this.getListFromCart()
    }
  }
</script>

<style>

</style>
